import React, { createRef, useEffect } from "react";
import * as echarts from "echarts";
import "echarts-liquidfill";
import ReactECharts from "echarts-for-react"; // or var Revar ReactECharts = require('echarts-for-react');
import classNames from "classnames";
import "./index.scss";
import { TitleBar } from "../title-bar";
import { Card } from "../card";
import { ITaskStatisticsChart } from "src/interfaces";
interface TaskDataType {
  title: string;
  value: number;
  list: ListType[];
}
interface ListType {
  value: number;
  title: string;
  hasTooltip: boolean;
}

interface PropsType {
  originData: ITaskStatisticsChart;
  type: "taskStatisticsChart" | "issueChart";
}
export const LiquidEachrt = ({ originData, type }: PropsType) => {
  const data: ITaskStatisticsChart = {
    total: originData?.total,
    done: originData?.done,
    overdue: originData?.overdue,
    unassigned: originData?.unassigned,
  };
  const color = ["#3972F9", "#6BDCAF", "#FAAD14", "#8A909F"];
  const title = {
    taskStatisticsChart: "任务统计",
    issueChart: "审阅意见",
  };
  const itemName = {
    done: "已完成",
    overdue: "已逾期",
    total: type === "taskStatisticsChart" ? "任务总数" : "意见总数",
    unassigned: type === "taskStatisticsChart" ? "未指派" : "未分配",
  };
  const option = {
    title: [
      {
        text: "已完成",
        x: "center",
        y: "30%",
        textStyle: {
          color: "#262626",
          fontSize: 12,
          fontWeight: "normal",
        },
      },
      {
        text:
          (originData.done > 0
            ? ((originData.done / originData.total) * 100).toFixed(0)
            : 0) + "%",
        x: "center",
        top: "40%",
        textStyle: {
          fontSize: 32,
          color: "#262626",
          fontWeight: "500",
        },
      },
    ],
    series: [
      {
        type: "liquidFill",
        radius: "98%",
        center: ["50%", "50%"],
        color: ["#ecf3fe", "#c8dcfe", "#5594fa"],
        data: [
          originData.done / originData.total,
          originData.done / originData.total,
          originData.done / originData.total,
        ], // data个数代表波浪数
        amplitude: 10,
        outline: {
          // 轮廓设置
          show: true,
          borderDistance: 4, // 边框与球中间间距
          itemStyle: {
            borderWidth: 2,
            borderColor: "#3972F9",
          },
        },
        // 图形样式
        itemStyle: {
          opacity: 1, // 波浪的透明度
          shadowBlur: 0, // 波浪的阴影范围
        },
        backgroundStyle: {
          borderWidth: 2,
          borderColor: "#fff",
          color: "#fff",
        },
        label: {
          show: true,
          textStyle: {
            color: "#262626",
            insideColor: "#12786f",
            fontSize: 40,
          },
          formatter: () => {
            return "";
          },
        },
      },
    ],
  };
  return (
    <div className="liquid-echart">
      <TitleBar name={title[type]} />
      <Card>
        <ReactECharts
          style={{
            display: "inline-block",
            width: "160px",
            height: "160px",
          }}
          option={option}
        />
        <div className="task_type">
          {Object.keys(data).map((item: string, index: number) => {
            return (
              <div
                className={classNames("item", {
                  margin_b_24: index <= 1,
                })}
                key={item}
              >
                <div className="content">
                  <p
                    className="item_value"
                    style={{
                      color: color[index],
                    }}
                  >
                    {data[item]}
                  </p>
                  <p className="item_title">
                    <span className="vertical_middle">{itemName[item]}</span>
                  </p>
                </div>
              </div>
            );
          })}
        </div>
      </Card>
    </div>
  );
};
